import React from 'react';
import './Dashboard.css';
import { Card, Row, Col, Statistic, Progress, List, Avatar } from 'antd';
import {
  UserOutlined,
  ShoppingCartOutlined,
  DollarOutlined,
  RiseOutlined,
} from '@ant-design/icons';

const Dashboard: React.FC = () => {
  const recentUsers = [
    { name: '张三', email: 'zhangsan@example.com', avatar: '' },
    { name: '李四', email: 'lisi@example.com', avatar: '' },
    { name: '王五', email: 'wangwu@example.com', avatar: '' },
    { name: '赵六', email: 'zhaoliu@example.com', avatar: '' },
  ];

  const recentOrders = [
    { id: '1001', customer: '张三', amount: 299, status: 'completed' },
    { id: '1002', customer: '李四', amount: 599, status: 'pending' },
    { id: '1003', customer: '王五', amount: 199, status: 'processing' },
    { id: '1004', customer: '赵六', amount: 899, status: 'completed' },
  ];

  return (
    <div className="page-transition">
      <Row gutter={[16, 16]}>
        <Col xs={24} sm={12} md={6}>
          <Card>
            <Statistic
              title="总用户数"
              value={1128}
              prefix={<UserOutlined />}
              suffix={<RiseOutlined style={{ color: '#3f8600' }} />}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={6}>
          <Card>
            <Statistic
              title="总订单数"
              value={1234}
              prefix={<ShoppingCartOutlined />}
              suffix={<RiseOutlined style={{ color: '#3f8600' }} />}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={6}>
          <Card>
            <Statistic
              title="销售额"
              value={56000}
              precision={2}
              prefix={<DollarOutlined />}
              suffix="元"
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={6}>
          <Card>
            <Statistic
              title="转化率"
              value={23.5}
              precision={1}
              suffix="%"
              valueStyle={{ color: '#3f8600' }}
            />
          </Card>
        </Col>
      </Row>

      <Row gutter={[16, 16]} style={{ marginTop: 16 }}>
        <Col xs={24} lg={12}>
          <Card title="销售进度" extra={<a href="#">查看详情</a>}>
            <div style={{ marginBottom: 16 }}>
              <div style={{ marginBottom: 8 }}>本月目标: 100,000元</div>
              <Progress percent={56} status="active" />
              <div style={{ marginTop: 8, color: '#666' }}>
                已完成: 56,000元 / 剩余: 44,000元
              </div>
            </div>
            <div>
              <div style={{ marginBottom: 8 }}>用户增长目标: 1000人</div>
              <Progress percent={85} status="active" />
              <div style={{ marginTop: 8, color: '#666' }}>
                已增长: 850人 / 剩余: 150人
              </div>
            </div>
          </Card>
        </Col>
        <Col xs={24} lg={12}>
          <Card title="最新用户" extra={<a href="#">查看全部</a>}>
            <List
              itemLayout="horizontal"
              dataSource={recentUsers}
              renderItem={(item) => (
                <List.Item>
                  <List.Item.Meta
                    avatar={<Avatar icon={<UserOutlined />} />}
                    title={item.name}
                    description={item.email}
                  />
                </List.Item>
              )}
            />
          </Card>
        </Col>
      </Row>

      <Row gutter={[16, 16]} style={{ marginTop: 16 }}>
        <Col span={24}>
          <Card title="最新订单" extra={<a href="#">查看全部</a>}>
            <List
              dataSource={recentOrders}
              renderItem={(item) => (
                <List.Item>
                  <List.Item.Meta
                    title={`订单号: ${item.id}`}
                    description={`客户: ${item.customer}`}
                  />
                  <div style={{ textAlign: 'right' }}>
                    <div style={{ fontSize: 16, fontWeight: 'bold' }}>
                      ¥{item.amount}
                    </div>
                    <div style={{ fontSize: 12, color: '#666' }}>
                      {item.status === 'completed' && '已完成'}
                      {item.status === 'pending' && '待处理'}
                      {item.status === 'processing' && '处理中'}
                    </div>
                  </div>
                </List.Item>
              )}
            />
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default Dashboard;